<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>waterfall-pos</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 785px;
            height: auto;
            margin: 20px auto;
            border: 1px solid #e74f4d;
            position:relative;
        }
        .container ul{
            list-style: none;
        }
        .container li{
            position: absolute;
            border: 1px solid green;
        }

    </style>
</head>
<body>
    <div class="container">
        <ul id="waterfall">
            <li>
                <img src="img/1.jpg" alt="">
                <p>1.jpg</p>
            </li>
            <li>
                <img src="img/2.jpg" alt="">
                <p>2.jpg</p>
            </li>
            <li>
                <img src="img/3.jpg" alt="">
                <p>3.jpg</p>
            </li>
            <li>
                <img src="img/4.jpg" alt="">
                <p>4.jpg</p>
            </li>
            <li>
                <img src="img/5.jpg" alt="">
                <p>5.jpg</p>
            </li>
            <li>
                <img src="img/6.jpg" alt="">
                <p>6.jpg</p>
            </li>
            <li>
                <img src="img/7.jpg" alt="">
                <p>7.jpg</p>
            </li>
            <li>
                <img src="img/8.jpg" alt="">
                <p>8.jpg</p>
            </li>
            <li>
                <img src="img/9.jpg" alt="">
                <p>9.jpg</p>
            </li>
        </ul>
    </div>

    <script>
        window.onload = function () {
            var ul = document.getElementById('waterfall');
            var li = ul.getElementsByTagName('li');
            var liHeight = {
                l:[],
                m:[],
                r:[]
            };

            render();
            function render() {
                for(var i=0; i<li.length; i++ ){
                    var index = i%3;
                    switch (index){
                        case 0:
                            li[i].style.left = '5px';
                            liHeight.l.push(li[i].offsetHeight);

                            var step = Math.floor(i/3);
                            if(!step){
                                li[i].style.top = 0;
                            }else{
                                var sum = 0;
                                for(var j = 0; j<step; j++){
                                    sum += liHeight.l[j] + 5;
                                }
                                li[i].style.top = sum +'px';
                            }
                            break;

                        case 1:
                            li[i].style.left = '250px';
                            liHeight.m.push(li[i].offsetHeight);

                            var step = Math.floor(i/3);
                            if(!step){
                                li[i].style.top = 0;
                            }else{
                                var sum = 0;
                                for(var j = 0; j<step; j++){
                                    sum += liHeight.m[j] + 5;
                                }
                                li[i].style.top = sum +'px';
                            }
                            break;

                        case 2:
                            li[i].style.left = '495px';
                            liHeight.r.push(li[i].offsetHeight);

                            var step = Math.floor(i/3);
                            if(!step){
                                li[i].style.top = 0;
                            }else{
                                var sum = 0;
                                for(var j = 0; j<step; j++){
                                    sum += liHeight.r[j] + 5;
                                }
                                li[i].style.top = sum +'px';
                            }
                            break;
                    }
                }
            }
        }
    </script>
</body>
</html>